<template>
	<view class="keyInputPasswd">
		<van-field v-model="KeyValue" readonly clickable @touchstart.stop="showKeyBoard = true" type="password" />
		<text>忘记密码？</text>
	</view>
	<van-number-keyboard :random-key-order="true" close-button-text	 v-model="KeyValue" :show="showKeyBoard" @blur="OffKeyBoard">
		<template v-slot:extra-key>
			<view>完成</view>
		</template>
		<template v-slot:title-left>
			<view style="margin-left: 10px;">KOI安全键盘</view>
		</template>
	</van-number-keyboard>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, defineEmits,defineProps } from 'vue'
	const emit = defineEmits(['clickFN','FlagA'])
	const props = defineProps({
		duePag: {
			type: [String]
		},
		})
	const showKeyBoard = ref<boolean>(true);
	const KeyValue = ref<string>('');
	onLoad(()=>{
		console.log('-----',props.duePag)
	})
	const OffKeyBoard = () => {
		showKeyBoard.value = false
		console.log(KeyValue)
		emit('clickFN', KeyValue)
		emit('FlagA',false)
		if (KeyValue.value != '') {
			console.log('可以跳转',props.duePag)
			if(props.duePag ==='duePag'){
				uni.redirectTo({
					url: "/subdue/closeTheDeal/index",
				});
			}
		}
	}
</script>

<style scoped>
	
	::v-deep .van-number-keyboard {
		height: 400px;
	}

	::v-deep .van-key__wrapper {
		height: 100px;
	}

	::v-deep .van-key {
		height: 90px;
		color: #404040;
	}

	::v-deep .van-cell {
		width: 480px;
		height: 88px;
		border-radius: 10px;
		background: #38393a;
		border: 1px solid gray;
	}

	::v-deep .van-field__control {
		color: #fff;
		line-height: 65px;
	}

	.keyInputPasswd {
		position: relative;
		top: 30%;
		left: 50%;
		width: 480px;
		height: 88px;
		transform: translate(-50%, 0);

		&>text {
			float: right;
			color: red;
			margin-top: 10px;
			font-size: 28px;
		}
	}
</style>